<template>
  <div class="manageMent">
    <div class="leftMenu c-shadow">
      <ul>
        <li v-for="(menu, index) in leftMenu"
          :key="index"
          :class="{'select-content':true,'select-item':menu.sel}"
          active-class="selected"
          @click="toggleList(index)"
          >
          <i :class="menu.iconClass" @click="stopPropagation"></i>
          <a>{{menu.name}} <span>({{itemNum[index] || 0}})</span></a>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="odds c-shadow" ref="odds">
        <div class="companyName">
          <label for="name">企业名称:</label><el-input name="name" id="name" class="name" v-model="companyName" placeholder="请输入企业名称"></el-input>
        </div>
        <div class="datePicker">
          <span style="margin-right:7px;">{{timemaker}}:</span>
          <j-date-picker v-model="dateStart" :max="maxTime" @change="dateChange()"></j-date-picker>
          <span style="margin:0 10px;">至</span>
          <j-date-picker v-model="dateEnd" :min="dateStart" :max="curTime" @change="dateChange()"></j-date-picker>
        </div>
        <div class="riskType">
          <span style="margin-right:7px;">风险类型:</span>
          <j-select v-model="prewarningLabel" :initItems="prewarningTypes" :selectedIndex="prewarningIndex" ref="risktype"></j-select>
        </div>
        <div class="staffName">
          <label for="people">处理人:</label><el-input name="people" id="people" class="people" v-model="staffName" placeholder="请输入处理人姓名"></el-input>
        </div>
        <div class="fhz">
          <span style="margin-right:21px;">烽火值:</span>
          <j-select v-model="numwarningLabel" :initItems="numwarningTypes" :selectedIndex="numwarningIndex" ref="riskcount"></j-select>
        </div>
        <div class="operation">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
        </div>
        <!--   -->
        <ul v-if="leftMenu[2].sel">
          归档类型:
          <li v-for="(re,index) in reason" :key="index" :class="{'choice':re.sel}" @click="choiceReason(index)">{{re.choice}}</li>
        </ul>
      </div>
      <div class="list c-shadow" ref="list">
        <p style="padding:30px 0 17px 20px;color:#666;">
          <span style="margin-right:10px;">排序:</span>
          <j-select v-model="sortname" :initItems="sortLabels" :selectedIndex="sortIndex" ref="selectSort" v-if="state !== 2"></j-select>
          <j-select v-model="sortname" :initItems="sortLabels2" :selectedIndex="sortIndex2" ref="selectSort" v-else></j-select>
          <j-select v-model="sort" :initItems="sortLabels3" :selectedIndex="sortIndex3" ref="selectSort2"></j-select>
        </p>
        <div style="padding:0 20px 30px 20px;" class="table-list">
          <j-no-data :mode="'b'" msg="b" v-if="list.length === 0"></j-no-data>
          <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0" v-else>
            <thead>
              <th class="whole">企业名称</th>
              <th>预警时间</th>
              <th v-if="state !== 2">风险类型</th>
              <th v-else>排查时间</th>
              <th>烽火值</th>
              <th>处理人</th>
              <th v-if="state === 2">归档类型</th>
              <th>状态</th>
              <th v-if="state !== 2">处理时间</th>
              <th v-else>归档时间</th>
              <th>操作</th>
            </thead>
            <tr v-for="(item,index) in list" :key="index">
              <td :title="item.entName" class="cursor">
                <router-link tag="a" target="_blank" :to="{name:'baseinfo', query: {entname:item.entName}}">
                  {{item.entName || '--'}}
                </router-link>
                <!-- <span>{{item.entName || '--'}}</span> -->
              </td>
              <td class="text-center">{{item.warningTime | dateFormat}}</td>
              <td class="text-center" :title="item.riskType" v-if="state !== 2">{{item.riskType || '--'}}</td>
              <td class="text-center" v-else>{{item.startTime | dateFormat}}</td>
              <td class="ent-emphasis text-center">{{item.beaconValue || '--'}}</td>
              <td class="text-center">{{item.operator || '--'}}</td>
              <td class="text-center" v-if="state === 2">{{reasons[item.caseType - 1] || '--'}}</td>
              <td class="text-center">{{processStatus[item.processStatus] || '--'}}</td>
              <!-- <td class="text-center">{{item.updateTime | dateFormat}}</td> -->
              <td class="text-center" v-if="state !== 2">{{item.updateTime | dateFormat}}</td>
              <td class="text-center" v-else>{{item.endTime | dateFormat}}</td>
              <td class="text-center">
                <router-link tag="a" target="" :to="{path:'/ManageList/manageState',query:{name:item.entName,state:item.processStatus,id:item.id}}">
                  <button class="uploadBtn">查看排查详情</button>
                </router-link>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- <div class="total fl">共 <span class="ent-number">{{total}}</span> 条{{CName}}企业</div> -->
      <div class="total fl">{{CName}} <span class="ent-number">{{total}}</span> 家企业</div>
      <div class="block paging-wrap fr">
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listParams.pageNum"
          :page-size.sync="listParams.pageSize"
          layout="prev, pager, next, jumper"
          :total.sync="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { management as api } from '../../api'
import { jDatePicker, jSelect, jNoData } from '../../components'
export default {
  data() {
    return {
      processStatus:['风险预警', '线上排查中', '线下排查中', '归档'],
      leftMenu: [
        {
          name: '线上排查中',
          iconClass: 'iconfont icon-paicha',
          sel:true
        },
        {
          name: '线下排查中',
          iconClass: 'iconfont icon-zhencha',
          sel:false
        },
        {
          name: '已归档',
          iconClass: 'iconfont icon-guidang',
          sel:false
        }
      ],
      timemaker:'处理时间',
      itemNum:[],
      dateStart:'',
      dateEnd:'',
      CName:'线上排查中',
      companyName:"", // 企业名称
      staffName:'', // 处理人名称
      leftreason:'',
      list:[ ], // 接值列表
      listParams: {
        pageNum: 1,
        pageSize: 10
      },
      state: 0,
      reason:[
        {choice:'不限', sel:true},
        {choice:'移交公安', sel:false},
        {choice:'移交工商', sel:false},
        {choice:'自行处置', sel:false}
      ],
      reasons: ['线上排查', '线下排查', '移交工商', '移交公安', '自行处置', '归档'],
      lrreason:'',
      prewarningLabel:'',
      prewarningTypes:['不限', '经营风险', '舆情风险', '关联风险', '传播风险'],
      prewarningIndex:0,
      prewarning:'',
      numwarning:'',
      numwarningLabel:'',
      numwarningTypes:['不限', '80-100', '60-80', '40-60', '40以下'],
      numwarningIndex:0,
      total:0,
      sort:'',
      sortLabel:'',
      sortlevel:'',
      sortname: '',
      sortLabels:['处理时间', '烽火值', '预警时间'],
      sortLabels2:['处理时间', '烽火值', '预警时间', '归档日期'],
      sortLabels3:['倒序', '正序'],
      sortIndex:0,
      sortIndex2:0,
      sortIndex3:0
    }
  },
  computed:{
    maxTime() {
      if ((new Date().valueOf() - new Date(this.dateEnd).valueOf()) > 0) {
        return this.dateEnd
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    }
  },
  watch: {
    prewarningLabel(value) {
      if (value) {
        this.prewarning = value
      }
      this.listParams.pageNum = 1
      this.dateChange()
    },
    numwarningLabel(value) {
      if (value) {
        this.numwarning = value
      }
      this.listParams.pageNum = 1
      this.dateChange()
    },
    sortname(value) {
      if (value) {
        this.sortLabel = value
      }
      this.listParams.pageNum = 1
      this.dateChange()
    },
    sort(value) {
      if (value) {
        this.sortlevel = value
      }
      this.listParams.pageNum = 1
      this.dateChange()
    }
  },
  methods: {
    search() {
      this.dateChange()
    },
    reset() {
      this.companyName = ''
      this.dateStart = ''
      this.dateEnd = ''
      this.prewarning = ''
      this.numwarning = ''
      this.staffName = ''
      this.sortLabel = '处理时间'
      this.sortlevel = '倒序'
      this.$refs.risktype.select({
        data: '不限',
        selected: false,
        text: '不限',
        value: '不限'
      })
      this.$refs.selectSort.select({
        data: "处理时间",
        selected: false,
        text: "处理时间",
        value: "处理时间"
      })
      this.$refs.selectSort2.select({
        data: "倒序",
        selected: false,
        text: "倒序",
        value: "倒序"
      })
      this.$refs.riskcount.select({
        data: "不限",
        selected: false,
        text: "不限",
        value: "不限"
      })
      // this.choice(this.reason, 0)
      this.lrreason = ''
      if (this.state === 2) {
        this.choiceReason(0)
      } else {
        this.dateChange()
      }
    },
    dateChange(param) {
      // 侧栏选择
      this.listParams.processStatus = 1
      if (this.leftreason) {
        this.listParams.processStatus = this.leftreason || 1
      } else {
        this.listParams.processStatus = 1
      }
      // 搜索 模糊搜索
      if (this.companyName) {
        this.listParams.entName = this.companyName
      } else {
        delete this.listParams.entName
      }
      // 处理人  模糊搜索
      if (this.staffName) {
        this.listParams.operator = this.staffName
      } else {
        delete this.listParams.operator
      }
      // 风险类型 筛选
      if (this.prewarning && this.prewarning !== '不限') {
        this.listParams.riskType = this.prewarning
      } else {
        delete this.listParams.riskType
      }
      // 烽火值 筛选
      if (this.numwarning && this.numwarning !== '不限') {
        if (this.numwarning === '40以下') {
          this.listParams.maxscore = 40
          this.listParams.smallScore = ''
        } else {
          let nums = this.numwarning.split('-')
          this.listParams.maxscore = nums[1]
          this.listParams.smallScore = nums[0]
        }
      } else {
        this.listParams.maxscore = this.listParams.smallScore = ''
      }
      // 排序 字段
      if (this.sortLabel === '处理时间') {
        this.listParams.sortColumn = 'UPDATE_TIME'
      } else if (this.sortLabel === '烽火值') {
        this.listParams.sortColumn = 'BEACON_VALUE'
      } else if (this.sortLabel === '预警时间') {
        this.listParams.sortColumn = 'WARNING_TIME'
      } else if (this.sortLabel === '归档日期') {
        this.listParams.sortColumn = 'END_TIME'
      } else {
        delete this.listParams.sortColumn
      }
      // 排序 正序倒序
      if (this.sortlevel === '正序') {
        this.listParams.order = 'ASC'
      } else if (this.sortlevel === '倒序') {
        this.listParams.order = 'DESC'
      } else {
        delete this.listParams.order
      }
      // 时间节点 选择类型
      if (this.dateStart || this.dateEnd) {
        if (this.listParams.processStatus === 3) {
          this.listParams.yourColumn = 'WARNING_TIME'
        } else if (this.listParams.processStatus === 1 || this.listParams.processStatus === 2) {
          this.listParams.yourColumn = 'UPDATE_TIME'
        } else {
          delete this.listParams.yourColumn
        }
      } else {
        delete this.listParams.yourColumn
      }
      // 时间
      if (this.dateStart) {
        this.listParams.qStartTime = this.dateStart + ' 00:00:00'
      } else {
        delete this.listParams.qStartTime
      }
      if (this.dateEnd) {
        this.listParams.qEndTime = this.dateEnd + ' 23:59:59'
      } else {
        delete this.listParams.qEndTime
      }
      // 已归档列入原因
      if (this.lrreason !== '不限' && this.lrreason && this.leftreason === 3) {
        this.reasons.map((item, ind) => {
          if (this.lrreason === item) {
            this.listParams.caseType = ind + 1
          }
        })
      } else {
        delete this.listParams.caseType
      }
      // 分页
      if (param) {
        this.listParams = Object.assign(this.listParams, param)
      }
      // console.log(this.listParams)
      this.getList(this.listParams)
    },
    getList(params) {
      api.getRiskList(params).then(res => {
        console.log(res)
        this.list = res.data.list
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    getAllList() {
      api.getCount().then(res => {
        let one = res.data.onlineCount || 0
        let two = res.data.outlineCount || 0
        let three = res.data.archiveCount || 0
        this.itemNum.push(one)
        this.itemNum.push(two)
        this.itemNum.push(three)
      }).catch(err => {
        console.log(err)
      })
    },
    toggleList(i) {
      if (i === 2) {
        this.timemaker = '预警时间'
      } else {
        this.timemaker = '处理时间'
      }
      this.leftreason = i + 1 || 1
      this.CName = this.leftMenu[i].name
      this.state = i
      this.choice(this.leftMenu, i)
      this.listParams.pageNum = 1
      this.reasonBarIsShow()
    },
    stopPropagation() {
      event.stopPropagation()
    },
    reasonBarIsShow() {
      if (!this.leftMenu[2].sel) {
        this.$refs['odds'].style.height='160px'
        this.$refs['odds'].style.paddingBottom='30px'
      } else {
        this.$refs['odds'].style.height='200px'
        this.$refs['odds'].style.paddingBottom='0'
      }
      this.reset()
      // this.dateChange()
    },
    handleCurrentChange() {
      this.dateChange()
    },
    handleSizeChange() {},
    choiceReason(i) {
      this.choice(this.reason, i)
      this.lrreason = this.reason[i].choice === '不限' ? '' : this.reason[i].choice
      this.listParams.pageNum = 1
      this.dateChange()
    },
    choice(arr, i) {
      arr.map(item => { item.sel = false })
      arr[i].sel = true
    }
  },
  components: {
    jDatePicker, jSelect, jNoData
  },
  mounted() {
    this.getAllList()
    if (this.$route.query.state) {
      this.toggleList(this.$route.query.state-1)
    } else {
      this.dateChange()
    }
  }
}
</script>

<style lang="scss" scoped>
  .manageMent{
    padding: 20px 2px 20px 2px;
    width: 100%;
    display: flex;
    .leftMenu{
      box-sizing: border-box;
      min-width: 180px;
      width: 15%;
      height: calc(100vh - 95px);
      min-height: 600px;
      ul{
        width: 100%;
        display: flex;
        margin-top: 20px;
        flex-direction: column;
        li{
          line-height: 48px;
          // display: flex;
          // align-items: center;
          position: relative;
          color: #555;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            color: #3f8ffa;
          }
          a:hover {
            color: #3f8ffa;
          }
          .iconfont{
            font-size: 19px;
            left: 13%;
          }
          a{
            display: inline-block;
            width: 100%;
            padding-left: 70px;
          }
        }
      }
    }
    .selected {
      color: #3f8ffa;
      a {
        color: #3f8ffa;
      }
      i {
        color: #3f8ffa;
      }
    }
    .select-item{
      color: #3f8ffa;
      a {
        color: #3f8ffa;
      }
      i {
        color: #3f8ffa;
      }
    }
    .select-content {
      position: relative;
      ul {
        li {
          padding-left: 60px;
        }
      }
    }
    .select-content a:after {
      display: inline-block;
      position: absolute;
      right: 8%;
      top: 3px;
    }
    .select-content i {
      font-size: 19px;
      position: absolute;
      left: 15%;
      // &:hover{
      //   color:#3f8ffa;
      // }
    }
    .select-content .icon-paicha {
      font-size: 23px;
    }
    .select-content .icon-zhencha {
      font-size: 30px;
      left: 13%;
    }
    .select-content .icon-guidang {
      font-size: 25px;
      left: 13%;
    }
    .select-content a {
      display: inline-block;
      width: 100%;
      padding-left: 70px;
      box-sizing: border-box;
    }
    .content{
      width: 82%;
      margin-left: 3%;
      height: auto;
      .odds{
        width: 100%;
        height:160px;
        display: flex;
        flex-wrap: wrap;
        padding: 30px 20px 30px 20px;
        box-sizing: border-box;
        color: #999999;
        // font-weight: bold;
        .companyName{
          width: 260px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name{
            width: 188px;
          }
        }
        .datePicker{
          width: 390px;
          height: 36px;
          margin-left: 93px;
        }
        .riskType{
          width: 239px;
          margin-left:93px;
          .select{
            width: 167px;
          }
        }
        .staffName{
          width: 260px;
          height: 36px;
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .people{
            width: 188px;
          }
        }
        .fhz{
          width: 390px;
          height: 36px;
          margin-top: 20px;
          margin-left: 93px;
          .select{
            width: 318px;
          }
        }
        .operation{
          width: 239px;
          height: 36px;
          margin-top: 20px;
          margin-left:93px;
          display: flex;
          button{
            flex:1;
          }
        }
        ul{
          width:100%;
          height: 40px;
          display: flex;
          align-items: center;
          margin-top: 20px;
          border-top: 1px solid #ccc;
          li{
            padding:0 37px;
            cursor: pointer;
          }
          li:hover{
            color:#40a1f3
          }
          .choice{
            color:#40a1f3
          }
        }
      }
      .list{
        width: 100%;
        // height: calc(100vh - 385px);
        height: auto;
        margin-top: 20px;
        .uploadBtn{
          border: 0;
          display: inline;
          text-decoration: underline;
          color: #2f97ff;
          background: none;
          cursor: pointer;
          font-size: 16px;
        }
      }
      .table-list {
        padding: 40px;
        margin-bottom: 20px;
        table {
          width: 100%;
          border: 1px solid #c7e0f7;
          border-collapse: collapse;
          th {
            background: #e9f3ff;
            text-align: center;
          }
          tbody {
            tr:nth-of-type(odd) {
              background: #f3f8ff;
            }
            tr:hover {
              background: #fffaeb;
            }
          }
          tr {
            line-height: 40px;
          }
          td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              padding: 5px;
              border-radius: 5px;
            }
          }
          th:first-child {
            width: 290px;
          }
          th:nth-child(5) {
            width: 85px;
          }
          th:nth-child(4) {
            width: 70px;
          }
          th:last-child {
            width: 120px;
          }
        }
      }
      .total {
        font-size: 14px;
        color: #999;
        margin-top: 23px;
        .ent-number {
          color: #40a1f3;
          font-weight: bold;
        }
      }
    }
  }
</style>


// WEBPACK FOOTER //
// src/view/managements/index.vue